<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <p>


<style type="text/css" media="screen">
   
    #list{
        margin:0 auto;
        overflow:hidden;
        position:relative;
    }
    #list ul,
    #list li{
        list-style:none;
        margin:0;
        padding:0;
    }
    #list a{
        position:absolute;
        text-decoration: none;
    }
    #list a:hover{
        color:#8C8C8C;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">


$(document).ready(function(){
    
var element = $('#list a');
var offset = 0; 
var stepping = 0.01;
var list = $('#list');
var $list = $(list);

/* $list.mousemove(function(e){

    var topOfList = $list.eq(0).offset().top;
 

    var listHeight = $list.height();

    // Sets variable that controls the speed of rotation.
 

    stepping = (e.clientY - topOfList) /  listHeight *0.9 - 0.1;


}); */



for (var i = element.length - 1; i >= 0; i--)
{
    element[i].elemAngle = i * Math.PI * 2 / element.length;
}


setInterval(render, 20);


function render(){
    for (var i = element.length - 1; i >= 0; i--){
        
        var angle = element[i].elemAngle + offset;
        
        x = 87 + Math.sin(angle) * 30;
        y = 45 + Math.cos(angle) * 40;
        size = Math.round(20 - Math.sin(angle) * 20);
        
        var elementCenter = $(element[i]).width() / 2;

        var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"

        $(element[i]).css("fontSize", size + "pt");
        $(element[i]).css("opacity",size/10);
        $(element[i]).css("zIndex" ,size);
        $(element[i]).css("left" ,leftValue);
        $(element[i]).css("top", y + "%");
    }
    
    offset += stepping;
}

    
});

</script>




<div style="height: 150px;padding-top: 100px;position: bottom" id ="list">
	<p>
	<a href ="/tour/board/list.do?page=${param.page }" ><img src = "/tour/images/main_img/클라우드공지사항.jpg"width="250"></a>
	<a href ="/tour/templates/course.jsp" ><img src = "/tour/images/main_img/클라우드사이트소개.jpg"width="250"></a> 
	<a href ="/tour/ep_board/list.do?page=${param.page }" ><img src = "/tour/images/main_img/클라우드여행코스.jpg"width="250"></a>	
	<a href ="/tour/cm_board/list.do?page=${param.page }" ><img src = "/tour/images/main_img/클라우드자유게시판.jpg"width="250"></a>

</div>


	
	
</body>